{namespace Music.soy}

/**
 * This is a Closure Template.
 *
 * To regenerate just English, run:
 *   make music-en
 *
 * To regenerate all languages, run:
 *   make languages
 */

/**
 * Translated messages for use in JavaScript.
 */
{template .messages}
  {call BlocklyGames.soy.messages /}
  <div style="display: none">
    // Block text and their associated tooltips and URLs (interleaved to
    // assist with translation).
    <span id="Music_playNoteTooltip">{msg meaning="Music.playNoteTooltip" desc="tooltip"}Plays one musical note of the specified duration and pitch.{/msg}</span>
    <span id="Music_playNote">{msg meaning="Music.playNote" desc="Plays one musical note.  %1 is duration of the note (whole, quarter, ...), %2 is the pitch of the note (A, B, C, ...).\n\n''FIXME''' :\n* Where are the translation for 'whole note', 'quarter note' (note: this cannot be split with the common term for 'note', the adjectives for 'whole' or 'half' may combine differently or both may combine to a single and distinctive term), so '%1 note' should become just '%1' after fixing the code and adding new translation units.\n* The pitches (A, B, C, ...) are also language dependant (C=do/ut, D=re, ... G=sol, A=la, B=si) and should be translatable too."}play %1 note %2{/msg}</span>
    <span id="Music_restTooltip">{msg meaning="Music.restTooltip" desc="tooltip"}Waits for the specified duration.{/msg}</span>
    <span id="Music_restWholeTooltip">{msg meaning="Music.restWholeTooltip" desc="tooltip"}Waits for one whole note.{/msg}</span>
    <span id="Music_rest">{msg meaning="Music.rest" desc="Plays no music for a duration specified.  %1 is the duration (whole, quarter, ...)."}rest %1{/msg}</span>
    <span id="Music_setInstrumentTooltip">{msg meaning="Music.setInstrumentTooltip" desc="tooltip"}Switches to the specified instrument when playing subsequent musical notes.{/msg}</span>
    <span id="Music_setInstrument">{msg meaning="Music.setInstrument" desc="Sets to an instrument to play music.  %1 is type of the instrument (guitar, piano, ...)."}set instrument to %1{/msg}</span>
    <span id="Music_startTooltip">{msg meaning="Music.startTooltip" desc="tooltip"}Executes the blocks inside when the 'Run Program' button is clicked.{/msg}</span>
    <span id="Music_start">{msg meaning="Music.start" desc="The program associated with this label is executed when a button is clicked.  %1 is image of the play icon on the button."}when %1 clicked{/msg}</span>
    <span id="Music_pitchTooltip">{msg meaning="Music.pitchTooltip" desc="tooltip - Describes a musical note selector.  'C4' (also known as 'DO') is the note in the center of a piano keyboard and is represented as the number 7."}One note (C4 is 7).{/msg}</span>
    <span id="Music_firstPart">{msg meaning="Music.firstPart" desc="Example name of a function that plays the first part of some music."}first part{/msg}</span>

    <span id="Music_piano">{{msg meaning="Music.piano" desc="Name of musical instrument.\n{lb}{lb}Identical|piano{rb}{rb}"}}piano{{/msg}}</span>
    <span id="Music_trumpet">{{msg meaning="Music.trumpet" desc="Name of musical instrument.\n{lb}{lb}Identical|trumpet{rb}{rb}"}}trumpet{{/msg}}</span>
    <span id="Music_banjo">{{msg meaning="Music.banjo" desc="Name of musical instrument.\n{lb}{lb}Identical|banjo{rb}{rb}"}}banjo{{/msg}}</span>
    <span id="Music_violin">{{msg meaning="Music.violin" desc="Name of musical instrument.\n{lb}{lb}Identical|violin{rb}{rb}"}}violin{{/msg}}</span>
    <span id="Music_guitar">{{msg meaning="Music.guitar" desc="Name of musical instrument.\n{lb}{lb}Identical|guitar{rb}{rb}"}}guitar{{/msg}}</span>
    <span id="Music_flute">{{msg meaning="Music.flute" desc="Name of musical instrument.\n{lb}{lb}Identical|flute{rb}{rb}"}}flute{{/msg}}</span>
    <span id="Music_drum">{{msg meaning="Music.drum" desc="Name of musical instrument.\n{lb}{lb}Identical|drum{rb}{rb}"}}drum{{/msg}}</span>
    <span id="Music_choir">{{msg meaning="Music.choir" desc="Name of musical instrument.\n{lb}{lb}Identical|choir{rb}{rb}"}}choir{{/msg}}</span>

    <span id="Music_submitDisabled">{msg meaning="Music.submitDisabled" desc="Error message."}Run your program until it stops. Then you may submit your music to the gallery.{/msg}</span>
  </div>
{/template}

/**
 * Web page structure.
 */
{template .start}
  {call .messages /}
  {call BlocklyGames.soy.headerBar}
    {param appName}
      {msg meaning="Games.music" desc="IBID"}Music{/msg}
    {/param}
    {param levelLinkSuffix}{/param}
    {param hasLinkButton: true /}
    {param hasHelpButton: true /}
    {param farLeftHtml}{/param}
  {/call}

  <div id="paddingBox"></div>
  <div id="staveBox"></div>
  <div id="musicBox">
    <div id="musicContainer"></div>
  </div>
  <table style="padding-top: 1em;">
    <tr>
      <td style="width: 190px; text-align: center; vertical-align: top;">
        <svg
            id="slider"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:svg="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1"
            width="150"
            height="50">
          <!-- Slow icon. -->
          <clipPath id="slowClipPath">
            <rect width=26 height=12 x=5 y=14 />
          </clipPath>
          <image xlink:href="common/icons.png" height=63 width=84 x=-21 y=-10
              clip-path="url(#slowClipPath)" />
          <!-- Fast icon. -->
          <clipPath id="fastClipPath">
            <rect width=26 height=16 x=120 y=10 />
          </clipPath>
          <image xlink:href="common/icons.png" height=63 width=84 x=120 y=-11
              clip-path="url(#fastClipPath)" />
        </svg>
      </td>
      <td style="width: 15px;">
        <img id="spinner" style="visibility: hidden;" src="common/loading.gif" height=15 width=15>
      </td>
      <td style="width: 190px; text-align: center">
        <button id="runButton" class="primary" title="{msg meaning="Games.runTooltip" desc="IBID"}Run the program you wrote.{/msg}">
          <img src="common/1x1.gif" class="run icon21"> {msg meaning="Games.runProgram" desc="IBID"}Run Program{/msg}
        </button>
        <button id="resetButton" class="primary" style="display: none" title="{msg meaning="Games.resetTooltip" desc="IBID"}Stop the program and reset the level.{/msg}">
          <img src="common/1x1.gif" class="stop icon21"> {msg meaning="Games.resetProgram" desc="IBID"}Reset{/msg}
        </button>
      </td>
    </tr>
  </table>
  {if $ij.level == 10 and not $ij.html}
  <table style="padding-top: 1em; width: 400px;">
    <tr>
      <td style="text-align: center;">
        <form action="/gallery" target="music-gallery">
          <input type="hidden" name="app" value="music">
          <input type="hidden" name="lang" value="{$ij.lang}">
          <button type="submit" title="{msg meaning="Music.galleryTooltip" desc="tooltip - Pressing this button opens a gallery of music made by other users."}Open the gallery of music.{/msg}">
            <img src="common/1x1.gif" class="gallery icon21"> {msg meaning="Music.galleryMsg" desc="Label on a button that opens a gallery of music made by other users."}See Gallery{/msg}
          </button>
        </form>
      </td>
      <td style="text-align: center;">
        <button id="submitButton" title="{msg meaning="Music.submitTooltip" desc="tooltip - Pressing this button causes the music created by the user's program to be submitted to a gallery for other people to see."}Submit your music to the gallery.{/msg}">
          <img src="common/1x1.gif" class="camera icon21"> {msg meaning="Music.submitMsg" desc="Label on a button that submits the user's art to a public gallery."}Submit to Gallery{/msg}
        </button>
      </td>
    </tr>
  </table>
  <div id="galleryDialog" class="dialogHiddenContent">
     <form id="galleryForm" action="/gallery-api/submit" method="post" onsubmit="return false">
      <header>{msg meaning="Music.submitTooltip" desc="IBID"}Submit your music to the gallery.{/msg}</header>
      <canvas id="thumbnail" width="200" height="200"></canvas>
      <input type="hidden" name="app" value="music">
      <input id="galleryThumb" type="hidden" name="thumb">
      <input id="galleryXml" type="hidden" name="xml">
      <div>
        {msg meaning="Games.submitTitle" desc="IBID"}Title:{/msg}
        {sp}
        <input id="galleryTitle" type="text" name="title" required>
      </div>

      <div class="farSide">
        <button id="galleryCancel" type="button">
          {{msg meaning="Games.dialogCancel" desc="IBID"}}Cancel{{/msg}}
        </button>
        <button id="galleryOk" class="secondary" type="submit">
          {{msg meaning="Games.dialogOk" desc="IBID"}}OK{{/msg}}
        </button>
      </div>
    </form>
  </div>
  {/if}

  {call .toolbox /}
  <div id="blockly"></div>

  {call BlocklyGames.soy.dialog /}
  {call BlocklyGames.soy.doneDialog /}
  {call BlocklyGames.soy.abortDialog /}
  {call BlocklyGames.soy.storageDialog /}
  <div id="helpUseFunctions" class="dialogHiddenContent">
    <div style="padding-bottom: 0.7ex">
      {msg meaning="Music.helpUseFunctions" desc="Dialog telling user to seek a better answer."}
        Your solution works, but you can do better.  Use functions to reduce the amount of repeated code.
      {/msg}
    </div>
    {call BlocklyGames.soy.ok /}
  </div>
  <div id="helpUseInstruments" class="dialogHiddenContent">
    <div style="padding-bottom: 0.7ex">
      {msg meaning="Music.helpUseInstruments" desc="Dialog telling user not to use only one musical instrument (piano, flute, etc)."}
        The music will sound better if you use a different instrument in each start block.
      {/msg}
    </div>
    {call BlocklyGames.soy.ok /}
  </div>

  <div id="help" class="dialogHiddenContent">
    <div style="padding-bottom: 0.7ex">
      {if $ij.level == 1}
        {msg meaning="Music.helpText1" desc="Instructions.  If your country has a song to the tune of 'Frère Jacques' use its name.  E.g. Bruder Jakob (German) or Kìa con bướm (Vietnamese)."}
          Compose the first four notes of 'Frère Jacques'.
        {/msg}
        <p>C4 - D4 - E4 - C4</p>
      {elseif $ij.level == 2}
        {msg meaning="Music.helpText2a" desc="Introducing a new block: function or subroutines"}
          A 'function' allows you to group blocks together,
          then run them more than once.
        {/msg}
        <div id="sampleHelp2" class="readonly"></div>
        {msg meaning="Music.helpText2b" desc="Instructions."}
          Create a function to play the first four notes of 'Frère Jacques'.
          Run that function twice.  Don't add any new note blocks.
        {/msg}
      {elseif $ij.level == 3}
        {msg meaning="Music.helpText3" desc="Instructions."}
          Create a second function for the next part of 'Frère Jacques'.
          The last note is longer.
        {/msg}
        <br><img src="music/note0.5.png" class="sampleNote">
      {elseif $ij.level == 4}
        {msg meaning="Music.helpText4" desc="Instructions."}
          Create a third function for the next part of 'Frère Jacques'.
          The first four notes are shorter.
        {/msg}
        <br><img src="music/note0.125.png" class="sampleNote">
      {elseif $ij.level == 5}
        {msg meaning="Music.helpText5" desc="Instructions."}
          Complete the full tune of 'Frère Jacques'.
        {/msg}
      {elseif $ij.level == 6}
        {msg meaning="Music.helpText6a" desc="Introducing a new block that changes musical instruments."}
          This new block lets you change to another instrument.
        {/msg}
        <div id="sampleHelp6" class="readonly"></div>
        {msg meaning="Music.helpText6b" desc="Instructions."}
          Play your tune with a violin.
        {/msg}
      {elseif $ij.level == 7}
        {msg meaning="Music.helpText7a" desc="Introducing a new block: a musical rest."}
          This new block adds a silent delay.
        {/msg}
        <div id="sampleHelp7" class="readonly"></div>
        {msg meaning="Music.helpText7b" desc="Instructions."}
          Create a second start block that has two delay blocks,
          then also plays 'Frère Jacques'.
        {/msg}
      {elseif $ij.level == 8}
        {msg meaning="Music.helpText8" desc="Instructions."}
          Each start block should play 'Frère Jacques' twice.
        {/msg}
      {elseif $ij.level == 9}
        {msg meaning="Music.helpText9" desc="Instructions."}
          Create four start blocks that each play 'Frère Jacques' twice.
          Add the correct number of delay blocks.
        {/msg}
      {elseif $ij.level == 10}
        {msg meaning="Music.helpText10" desc="Instructions."}
          Compose anything you want. You've got a huge number of new blocks you can explore. Have fun!
        {/msg}
        {if not $ij.html}
          <br><br>
          {msg meaning="Music.helpText10Reddit" desc="Instructions on publishing your music."}
            Use the "See Gallery" button to see what other people have composed. If you compose something interesting, use the "Submit to Gallery" button to publish it.
          {/msg}
        {/if}
      {/if}
    </div>
    {call BlocklyGames.soy.ok /}
  </div>
{/template}

/**
 * Toolbox.
 */
{template .toolbox}
  <xml id="toolbox" xmlns="https://developers.google.com/blockly/xml">
    {if $ij.level == 10}
      <category name="{msg meaning="Games.music" desc="IBID"}Music{/msg}">
        <block type="music_pitch">
          <field name="PITCH">7</field>
        </block>
        <block type="music_note">
          <field name="DURATION">0.25</field>
          <value name="PITCH">
            <shadow type="music_pitch">
              <field name="PITCH">7</field>
            </shadow>
          </value>
        </block>
        <block type="music_rest"></block>
        <block type="music_instrument"></block>
        <block type="music_start" id="music_start"></block>
      </category>
      <category name="{msg meaning="Games.catLogic" desc="IBID"}Logic{/msg}">
        <block type="controls_if"></block>
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_negate"></block>
        <block type="logic_boolean"></block>
        <block type="logic_ternary"></block>
      </category>
      <category name="{msg meaning="Games.catLoops" desc="IBID"}Loops{/msg}">
        <block type="controls_repeat_ext">
          <value name="TIMES">
            <shadow type="math_number">
              <field name="NUM">10</field>
            </shadow>
          </value>
        </block>
        <block type="controls_whileUntil"></block>
        <block type="controls_for">
          <value name="FROM">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="TO">
            <shadow type="math_number">
              <field name="NUM">10</field>
            </shadow>
          </value>
          <value name="BY">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
        </block>
        <block type="controls_forEach"></block>
        <block type="controls_flow_statements"></block>
      </category>
      <category name="{msg meaning="Games.catMath" desc="IBID"}Math{/msg}">
        <block type="math_number"></block>
        <block type="math_arithmetic">
          <value name="A">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="B">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
        </block>
        <block type="math_single">
          <value name="NUM">
            <shadow type="math_number">
              <field name="NUM">9</field>
            </shadow>
          </value>
        </block>
        <block type="math_number_property">
          <value name="NUMBER_TO_CHECK">
            <shadow type="math_number">
              <field name="NUM">0</field>
            </shadow>
          </value>
        </block>
        <block type="math_round">
          <value name="NUM">
            <shadow type="math_number">
              <field name="NUM">3.1</field>
            </shadow>
          </value>
        </block>
        <block type="math_modulo">
          <value name="DIVIDEND">
            <shadow type="math_number">
              <field name="NUM">64</field>
            </shadow>
          </value>
          <value name="DIVISOR">
            <shadow type="math_number">
              <field name="NUM">10</field>
            </shadow>
          </value>
        </block>
        <block type="math_constrain">
          <value name="VALUE">
            <shadow type="math_number">
              <field name="NUM">50</field>
            </shadow>
          </value>
          <value name="LOW">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="HIGH">
            <shadow type="math_number">
              <field name="NUM">100</field>
            </shadow>
          </value>
        </block>
        <block type="math_random_int">
          <value name="FROM">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="TO">
            <shadow type="math_number">
              <field name="NUM">100</field>
            </shadow>
          </value>
        </block>
        <block type="math_random_float"></block>
      </category>
      <category name="{msg meaning="Games.catLists" desc="IBID"}Lists{/msg}">
        <block type="lists_create_with">
          <mutation items="0"></mutation>
        </block>
        <block type="lists_create_with"></block>
        <block type="lists_repeat">
          <value name="NUM">
            <shadow type="math_number">
              <field name="NUM">5</field>
            </shadow>
          </value>
        </block>
        <block type="lists_length"></block>
        <block type="lists_isEmpty"></block>
        <block type="lists_indexOf">
          <value name="VALUE">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_getIndex">
          <value name="VALUE">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_setIndex">
          <value name="LIST">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_getSublist">
          <value name="LIST">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_sort"></block>
        <block type="lists_reverse"></block>
      </category>
      <sep></sep>
      <category name="{msg meaning="Games.catVariables" desc="IBID"}Variables{/msg}" custom="VARIABLE"></category>
      <category name="{msg meaning="Games.catProcedures" desc="IBID"}Functions{/msg}" custom="PROCEDURE"></category>
    {else}
      <category name="{msg meaning="Games.music" desc="IBID"}Music{/msg}">
        <block type="music_note">
          <field name="DURATION">0.25</field>
          <value name="PITCH">
            <shadow type="music_pitch">
              <field name="PITCH">7</field>
            </shadow>
          </value>
        </block>
        {if $ij.level > 6}
          <block type="music_rest_whole"></block>
        {/if}
        {if $ij.level > 5}
          <block type="music_instrument"></block>
        {/if}
        {if $ij.level > 6}
          <block type="music_start" id="music_start"></block>
        {/if}
      </category>
      {if $ij.level > 1}
        <category name="{msg meaning="Games.catProcedures" desc="IBID"}Functions{/msg}" custom="PROCEDURE"></category>
      {/if}
    {/if}
  </xml>
{/template}
